<template>
	<div class="box7">
		<div class="topf">
			<el-input placeholder="请输入商品名称" v-model="inpWord" @keyup.enter.native="search"></el-input>
			<div class="block">
				<el-date-picker @change.native="seleceStartTime" v-model="form.startTime" type="date"
					placeholder="请选择开始日期" style="margin-left: 20px;" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					suffix-icon="el-icon-date">
				</el-date-picker>
			</div>
			<div class="heng">—</div>
			<div class="block">
				<el-date-picker @change.native="seleceEndTime" v-model="form.endTime" type="date" placeholder="请选择结束日期"
					format="yyyy-MM-dd" value-format="yyyy-MM-dd">
				</el-date-picker>
			</div>
			<el-button class="btn" type="primary" @click="search" icon="el-icon-search">
				搜索
				
			</el-button>
		</div>
		<div class="banner">
			<el-table :data="pageTicket" style="width: 100%; cursor: pointer;" @row-click="gocontent">
				<el-table-column prop="userName" label="意见人" min-width="15%">
				</el-table-column>
				<el-table-column prop="wareName" label="商品名称" min-width="15%">
				</el-table-column>
				<el-table-column prop="ordersId" label="订单号" min-width="15%">
				</el-table-column>
				<el-table-column prop="commentContent" label="反馈内容" min-width="15%">
				</el-table-column>
				<el-table-column prop="commentTime" label="反馈时间" min-width="15%">
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-row>
				<el-col style="text-align:center; margin-top: 30px;">
					<el-pagination layout="prev, pager, next" @current-change="changePage"
						:current-page.sync="pageIndex" :page-size="pageSize" :total="total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					startTime: '',
					endTime: ""
				},
				baseUrl: require("../assets/baseUrl.js").baseUrl,
				inpWord: '', //搜索内容
				searchWord: '',
				pageTicket: [], //列表
				total: 0, //总数据条数
				pageIndex: 1, //第几页
				pageSize: 5, //每页显示几页
			}
		},
		watch: {
			pageIndex() {
				this.searchfor()
			}
		},
		methods: {
			//跳转详情
			gocontent(row) {
				//console.log(row)
				this.$router.push("/setup/setupcontent?commentId=" + row.commentId)
			},
			//改变页
			changePage(page) {
				this.pageIndex = page
				this.inpWord = this.searchWord
				this.searchfor()
			},
			//回车搜索
			search() {
				this.pageIndex = 1;
				this.searchWord = this.inpWord;
				this.searchfor()
			},
			Time() {
				//console.log(this.pageTicket)
				this.pageTicket.forEach(v => {
					let str = v.commentTime + ""
					v.commentTime = str.substring(0, 10)
				})
			},
			// 获取页面的表格所有数据
			getTicket() {
				//接口	http://localhost:8081/outlets/kan
				if(sessionStorage.getItem("adminRole")==2){
					this.$http.post(this.baseUrl + 'comments/menkan', {
						pageIndex: this.pageIndex + '',
						pageSize: this.pageSize,
						adminId:Number(sessionStorage.getItem("adminId"))
					}).then(res => {
						//console.log(res)
						if (res.data.code == 200) {
							this.pageTicket = res.data.data[""]
							this.total = Number(res.data.data.total)
							this.Time()
						}
					})
				}else{
					this.$http.post(this.baseUrl + 'comments/kan', {
						pageIndex: this.pageIndex + '',
						pageSize: this.pageSize,
					}).then(res => {
						//console.log(res)
						if (res.data.code == 200) {
							this.pageTicket = res.data.data[""]
							this.total = Number(res.data.data.total)
							this.Time()
						}
					})
				}
				
			},
			seleceStartTime(val) {
				this.form.startTime = val
				//this.searchfor()
				//console.log(this.form.startTime)
			},
			seleceEndTime(val) {
				this.form.endTime = val
				//console.log(this.form.endTime)
			},
			//搜索
			searchfor() {
				//接口	http://localhost:8081/comments/cha\
				//console.log(this.form.startTime)
				if(sessionStorage.getItem("adminRole")==2){
					this.$http.post(this.baseUrl + 'comments/mencha', {
						wareName: this.searchWord,
						beginTime: this.form.startTime,
						endTime: this.form.endTime,
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
						adminId:Number(sessionStorage.getItem("adminId"))
					}).then(res => {
						//console.log(res)
						if(res.data.code == 200){
							this.total=Number(res.data.data.total)
							this.pageTicket=res.data.data.comments
						}
						this.Time()
					})
				}else{
					this.$http.post(this.baseUrl + 'comments/cha', {
						wareName: this.searchWord,
						beginTime: this.form.startTime,
						endTime: this.form.endTime,
						pageIndex: this.pageIndex,
						pageSize: this.pageSize,
					}).then(res => {
						//console.log(res)
						if (res.data.code == 200) {
							this.total = Number(res.data.data.total)
							this.pageTicket = res.data.data.comments
						}
						this.Time()
					})
				}
				
			}
		},
		mounted() {
			//获取列表
			this.getTicket()
		}
	}
</script>
<style lang="less">
	.box7 {
		.topf {
			height: 65px;
			float: left;
			line-height: 60px;
			margin-bottom: 15px;
			margin-left: 30px;
			display: flex;
			align-items: center;

			.block .el-input--prefix .el-input__inner {
				width: 160px;
				padding-left: 15px;
			}

			.btn {
				display: flex;
				align-items: center;
				margin-left: 20px;

				.el-input {
					margin: 0 5px;
				}

			}

			.block {

				.el-date-editor.el-input,
				.el-date-editor.el-input__inner {
					width: 160px;
				}
			}
		}

		.banner {
			width: 80vw;
			margin-left: 30px;


			.el-table .cell {
				white-space: nowrap;
			}

			.el-table td.el-table__cell:nth-of-type(4) {
				text-decoration: underline;
			}

		
		}

		.el-input__prefix {
			left: 130px;
		}

		.el-input__suffix {
			right: 20px;
		}

		.heng {
			height: 65px;
			line-height: 60px;
			font-size: 20px;
			margin: 0 20px;
		}

		.cell {
			text-align: center;
		}
	}
</style>